<template>
	<div>
		<!-- 导航栏 -->
		<van-nav-bar
			title="消费记录"
			fixed
			left-text="返回"
			left-arrow
			@click-left="ckLeft">
		</van-nav-bar>

		<div class="order">
			<div
				class="date"
				v-for="item in list"
				:key="item.id">
				<div class="info">
					{{ item.content }}
				</div>
				<div class="time">{{ item.createtime }}</div>
			</div>
		</div>

		<!-- 网络请求加载状态 -->
		<van-overlay :show="isLoading" style="display: flex; justify-content: center; align-items: center;">
			<van-loading vertical>
				<template #icon>
					<van-icon name="star-o" size="30" />
				</template>
				加载中...
			</van-loading>
		</van-overlay>
	</div>
</template>

<script>
	import { showFailToast } from "vant";
	export default {
		created() {
			this.Record();
		},
		data() {
			return {
				list: [],
				isLoading: false
			};
		},
		methods: {
			async Record() {
				this.isLoading = true;
				let res = await this.$api.BusRecord({ id: this.$cookies.get("User").id });
				if (res.code == 1) {
					this.list = res.data;
				} else {
					showFailToast({ message: res.msg });
				}
				this.isLoading = false;
			},
			ckLeft() {
				this.$router.push("/business/");
			},
		},
	};
</script>

<style lang="less" scoped>
	.order {
		padding: 50px 5px 0 5px;
		width: 100vw;
		height: 100vh;
		overflow-y: auto;
		overflow-x: hidden;
		box-sizing: border-box;
		.date {
			width: 100%;
			height: 80px;
			display: flex;
			align-content: center;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: space-around;
			padding: 2px 5px;
			border-bottom: 1px solid gray;
			.info {
				width: 70%;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				div {
					width: 100%;
					height: 30%;
					text-align: left;
				}
			}
			.time {
				width: 28%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				color: gray;
			}
		}
	}
</style>
